<template>
  <!-- 目前只有询单详情的批量新建在使用：2020-09-11 -->
  <div class="order-info">
    <Title :title="title"/>
    <div class="order-info-form">
      <el-form
        ref="orderForm"
        :model="orderForm"
        :rules="orderRules"
        label-position="left"
        class="edit-order el-form-box-left"
        label-width="100px">
        <el-form-item label="下单日期" prop="orderTime">
          <el-date-picker
            v-model="orderForm.orderTime"
            :clearable="false"
            :editable="false"
            :disabled="isDisabledWithoutFile"
            type="date"
            value-format="timestamp"
            size="small"
            format="yyyy/MM/dd"
            class="order-time"/>
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select
            :disabled="isDisabled || isDisabledWithoutFile"
            v-model="orderForm.orderType"
            popper-class="global-select-down"
            name="orderType"
            size="small">
            <el-option
              v-for="item in orderOption"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled" />
          </el-select>
        </el-form-item>
        <el-form-item label="刊例价" prop="articlesPrice">
          <el-input
            v-model="orderForm.articlesPrice"
            :disabled="disabledTaxAmount || isDisabledWithoutFile"
            oninput="if(value>9999999999999999.00)value=1000000000000000"
            name="articlesPrice"
            type="number"
            size="small"
            @change="numberInputChange('articlesPrice')"
            @blur="mathDiscount"
          />
        </el-form-item>
        <el-form-item label="折扣" prop="discountPrice">
          <el-input v-model="orderForm.discountPrice" name="discountPrice" type="text" size="small" disabled />
        </el-form-item>
        <el-form-item label="含税金额" prop="taxAmount">
          <el-input
            v-model="orderForm.taxAmount"
            :disabled="disabledTaxAmount || isDisabledWithoutFile"
            oninput="if(value>9999999999999999.00)value=9999999999999999"
            name="taxAmount"
            type="number"
            size="small"
            @change="numberInputChange('taxAmount')"
            @blur="mathDiscount"
          />
        </el-form-item>
        <el-form-item label="收入类型" prop="incomeType">
          <el-select :disabled="isDisabledWithoutFile" v-model="orderForm.incomeType" popper-class="global-select-down" name="incomeType" size="small">
            <el-option
              v-for="item in incomeOption"
              :key="item.id"
              :label="item.name"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单平台" prop="orderPlatformId">
          <el-select
            :disabled="!!sealBillType || isDisabledWithoutFile"
            v-model="orderForm.orderPlatformId"
            popper-class="global-select-down"
            name="platformId"
            size="small"
            @change="getOrderFormList">
            <el-option
              v-for="item in orderPlatformOption"
              :key="item.id"
              :label="item.value"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="下单形式：" prop="orderFormId">
          <el-select :disabled="isDisabledWithoutFile" v-model="orderForm.orderFormId" popper-class="global-select-down" name="orderForm" size="small" @change="orderFormVal">
            <el-option
              v-for="item in formList"
              :key="item.id"
              :label="item.value"
              :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="账号" prop="resourceName">
          <el-select
            :disabled="!!sealBillType || isDisabledWithoutFile"
            v-model="orderForm.resourceName"
            :remote-method="searchResourceName"
            :loading="loading"
            :class="batchRemoteRequest"
            popper-class="global-select-down"
            filterable
            remote
            class="resourceFilterData remoteRequest1"
            placeholder="请输入账号可快速查找"
            size="small"
            value-key="id"
            @change="resourceSelect">
            <el-option
              v-for="(item,index) in resourceInfo"
              :key="index"
              :label="item.value +`${item.accountNameOrganization ? `[${item.accountNameOrganization}]` : ''}`"
              :value="item"/>
          </el-select>
          <div v-if="orderId && orderId!=='' && hasRouteAuth('crm:orderList:update')" class="updateInfo-btn" @click="toUpdateInfo">更新信息</div>
        </el-form-item>
        <el-form-item label="ID" prop="resourceCode">
          <el-input v-model="orderForm.resourceCode" name="resourceCode" type="text" size="small" disabled />
        </el-form-item>
        <el-form-item label="所属部门" prop="attributionMatrix">
          <el-input v-model="orderForm.attributionMatrix" name="attributionMatrix" type="text" size="small" disabled />
        </el-form-item>
        <el-form-item label="账号归属" prop="accountBelong">
          <el-input v-model="orderForm.accountBelong" name="accountBelong" type="text" size="small" disabled />
        </el-form-item>
        <el-form-item label="执行人" prop="orderOperator">
          <el-select
            v-loadmore="userLoadMore"
            ref="selectOrderOperator"
            :disabled="isFileDisabled"
            v-model="orderForm.orderOperator"
            :filter-method="filterData"
            popper-class="global-select-down"
            name="orderOperator"
            multiple
            filterable
            collapse-tags
            size="small"
            clearable
            value-key="id"
            @clear="clearUser" >
            <el-option
              v-for="(select, index) in userList.items"
              :key="index"
              :label="select.userName"
              :value="select" />
            <el-option
              v-for="(select, index) in orderForm.orderOperator"
              :key="'exten'+index"
              :label="select.userName"
              :value="select"
              style="display:none;" />
            <div v-if="userLoading" class="loading-container"><i class="el-icon-loading"/></div>
          </el-select>
        </el-form-item>
        <!-- v2.1.5.3 新增协作部门 -->
        <!-- 协作部门暂时隐藏 -->
        <el-form-item label="协作部门" prop="cooperationDepartment">
          <el-select
            ref="selectCooperationDepartment"
            :disabled="isFileDisabled"
            v-model="orderForm.cooperationDepartment"
            name="cooperationDepartment"
            popper-class="global-select-down"
            multiple
            collapse-tags
            size="small"
            clearable
            value-key="id" >
            <el-option
              v-for="(select, index) in deptListData"
              :key="index"
              :label="select.value"
              :value="{id:select.id, name:select.value }" />
          </el-select>
        </el-form-item>
        <el-form-item label="终端品牌" prop="terminalType" class="terminalType">
          <el-input :disabled="isDisabledWithoutFile" v-model.trim="orderForm.terminalType" name="terminalType" type="text" size="small" maxlength="50" />
        </el-form-item>
        <el-form-item label="主题" prop="theme" class="theme">
          <el-input :disabled="isDisabledWithoutFile" v-model.trim="orderForm.theme" name="theme" type="text" size="small" maxlength="50" />
        </el-form-item>
        <el-form-item label="附件" prop="attachment" class="attachment">
          <div class="attachment-container" style="width: 240px;">
            <upAttachment
              ref="uploadImg"
              :import-api="'/common/file/upload'"
              :hide-confirm="true"
              :is-disabled="isFileDisabled"
              :file-list="orderForm.attachment"
              :extend-params="{
                orderId:'', type: 1
              }"
              btn-text="上传文件"
              @upProgress="upProgress"
              @complateSetData="complateSetData"
              @removeFileList="removeFileList" />
          </div>
        </el-form-item>
        <el-form-item label="下单链接" prop="orderLink" size="small" class="order-link">
          <el-input :disabled="isFileDisabled" v-model.trim="orderForm.orderLink" name="orderLink" type="text" maxlength="500"/>
        </el-form-item>
        <el-form-item label="备注" prop="remark" style="margin-bottom: 0">
          <el-input
            :disabled="isDisabledWithoutFile"
            :autosize="{minRows: 2, maxRows: 6}"
            v-model.trim="orderForm.remark"
            resize="none"
            name="remark"
            type="textarea"
            maxlength="500"
            style="width: 240px;height: 64px" />
        </el-form-item>
        <el-form-item label="文案内容" prop="content" class="content">
          <el-input :disabled="isDisabledWithoutFile" :autosize="{minRows: 2, maxRows: 6}" v-model.trim="orderForm.content" resize="none" name="content" type="textarea" maxlength="3000" style="width: 240px;height: 64px" />
        </el-form-item>
      </el-form>
    </div>
    <confirm ref="confirmRef" @setConfirmData="setConfirmData" />
    <updateInfoDialog ref="updateInfoDialog" :dialog-type="'detail'" :resource-type="1" @freshData="freshData"/>
  </div>
</template>
<script>
import Title from '@/components/Title';
import Bus from './Bus'; // 子组件之间的传值
import upAttachment from '@/components/Common/upAttachment/index';
import { getList } from '@/api/user';
import { deptList } from '@/api/select';
import { hasRouteAuth } from '@/utils/permission';
import confirm from './confirm';
import updateInfoDialog from '@/components/CreateOrder/updateInfo';
import {
  platformList,
  getResource,
  orderFormList,
  getIncomeType
} from '@/api/select';
export default {
  name: 'OrderInfo',
  components: { Title, upAttachment, confirm, updateInfoDialog },
  props: {
    isDisabledWithoutFile: {
      type: Boolean,
      default: false
    },
    isFileDisabled: {
      type: Boolean,
      default: false
    },
    isDisabled: {
      type: Boolean,
      default: false
    },
    disabledTaxAmount: {
      type: Boolean,
      default: false
    },
    sealBillType: {
      type: Number,
      default: null
    },
    orderOption: {
      type: Array,
      default: () => {
        return [];
      }
    },
    orderPlatformId: {
      type: Number,
      default: null
    },
    batchWrite: { // 批量回填参数
      type: Object,
      default: () => ({})
    },
    isQuote: { // 引用赋值
      type: Boolean,
      default: false
    },
    batchRemoteRequest: {
      type: String,
      default: 'remoteRequestRs'
    }
  },
  data() {
    return {
      orderId: '',
      batchInit: false,
      title: '订单及资源信息',
      loading: false,
      userLoading: false,
      userList: {},
      deptListData: [],
      orderForm: {
        orderTime: new Date().getTime(),
        orderOperator: [],
        cooperationDepartment: [],
        orderType: null,
        orderPlatformId: null,
        taxAmount: null,
        resourceName: '',
        resourceId: null,
        orderFormId: null,
        accountBelong: '',
        attributionMatrix: '',
        orderLink: '',
        incomeType: null,
        theme: '',
        remark: '',
        content: '',
        attachment: [], // 上传文件
        resourceCategory: null,
        // 以下 v2.0.2 新增字段,time: 2020-05-29
        articlesPrice: null, // 刊例价【新增】
        discountPrice: '', // 折扣（自动计算）【新增】
        terminalType: '', // 终端品牌【新增】
        resourceCode: '' // ID（选择账号后自动填入）【新增】
      },
      orderRules: {
        orderTime: [{ required: true, trigger: 'change', message: '请选择下单日期' }],
        orderType: [{ required: true, trigger: 'change', message: '请选择订单类型' }],
        orderPlatformId: [{ required: true, trigger: 'change', message: '请填写下单平台' }],
        resourceName: [{ required: true, trigger: 'change', message: '请填写账号' }],
        taxAmount: [{ required: true, trigger: 'blur', message: '请填写含税金额' }],
        articlesPrice: [{ required: true, trigger: 'blur', message: '请填写刊例价' }],
        incomeType: [{ required: true, trigger: 'change', message: '请选择收入类型' }],
        orderFormId: [{ required: true, trigger: 'change', message: '请选择下单形式' }],
        theme: [{ required: true, trigger: 'change', message: '请填写主题' }],
        // terminalType: [{ required: true, trigger: 'blur', message: '请填写终端品牌' }],
        content: [{ required: true, trigger: 'change', message: '请填写文案内容' }]
        // orderLink: [{ required: true, trigger: 'blur', message: '请填写下单链接' }]
      },
      orderPlatformOption: [],
      resourceInfo: [],
      resourceInfoTotal: null,
      resourcePage: 1,
      formList: [],
      incomeOption: []
    };
  },
  watch: {
    resourceInfo(newV) {
      // 批量 this.orderForm.resourceName排除手动变更下单平台
      if (newV instanceof Array && Number(this.$route.query.model) === 1 && this.orderForm.resourceName && this.batchInit) {
        this.resourceSelect(newV.filter(item => item.value === this.orderForm.resourceName)[0]);
        this.batchInit = false;
      }
    },
    batchWrite(newV) {
      this.batchWriteBackfill();
    }
  },
  created() {
    // console.log('12', this.batchWrite);
    // 批量操作 数据回填处理

    this.orderId = this.$route.params.orderId || '';
    if (this.batchWrite && Number(this.$route.query.model) === 1) {
      this.batchWriteBackfill();
    }
    // 批量操作 只有原订单
    if (Number(this.$route.query.model) === 1) {
      this.orderForm.orderType = 0;
    }
    if (hasRouteAuth('crm:userList:read')) {
      this.getUser();
    }
    this.getDeptList();
  },
  mounted() {
    const that = this;
    const SELECTWRAP_DOM = document.querySelector('.resourceFilterData .el-select-dropdown__wrap');
    if (SELECTWRAP_DOM) {
      SELECTWRAP_DOM.addEventListener('scroll', function() {
        const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight;
        if (CONDITION) {
          that.resourceLoadMore();
        }
      });
    }
    window.removeReadOnly();
    // 账号
    window.remoteRequest(`.${this.batchRemoteRequest}`, this.searchResourceName);
  },
  methods: {
    hasRouteAuth,
    batchWriteBackfill() {
      this.batchInit = true;
      // 账号
      this.orderForm.resourceName = this.stringify(this.batchWrite.resourceName.value) || null;
      // this.resourceInfo = this.stringify(this.batchWrite.resourceInfo) || null;
      this.orderForm.orderPlatformId = this.stringify(this.batchWrite.platformId) || null;
      this.orderForm.resourceCode = this.stringify(this.batchWrite.accountId) || null;
      // this.orderPlatformId = this.batchWrite.platformId || null;
      this.orderPlatformOption = this.stringify(this.batchWrite.orderPlatformOption) || null;
      this.orderForm.resourceId = this.stringify(this.batchWrite.resourceId);
      this.orderForm.articlesPrice = this.batchWrite.articlesPrice / 100;
      this.orderForm.terminalType = this.stringify(this.batchWrite.terminalType);
      this.orderForm.theme = this.stringify(this.batchWrite.theme);
      if (this.orderForm.resourceName) {
        this.resourceList(this.orderForm.resourceName, this.orderForm.orderPlatformId);
      }
      this.init(this.batchWrite.platformId || null);
    },
    stringify(obj) {
      try {
        return JSON.parse(JSON.stringify(obj));
      } catch (error) {
        return null;
      }
    },
    init(orderPlatformId = null) {
      this.platformList();
      this.incomeTypeList();
      if (orderPlatformId || this.orderPlatformId) {
        this.getOrderForm(orderPlatformId || this.orderPlatformId);
        // this.getOrderFormList(this.orderPlatformId || orderPlatformId);
      }
    },
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    // 获取收入类型的列表
    async incomeTypeList() {
      try {
        const result = await getIncomeType();
        this.incomeOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    resourceLoadMore() {
      const resourceInfo = this.resourceInfo;
      const currentPage = this.resourcePage;
      const isMax = resourceInfo.length >= this.resourceInfoTotal;
      if (!isMax) {
        this.resourceList('', this.orderForm.orderPlatformId, currentPage + 1);
      }
    },
    // 获取账户名称的列表
    resourceList(query, orderPlatformId, page = 1) {
      if (orderPlatformId === '') return false;
      const params = {
        page,
        perPage: 20,
        resourceName: query,
        platformId: orderPlatformId
      };
      getResource(params).then(res => {
        this.resourceInfoTotal = res.data.total;
        this.resourcePage = res.data.page;
        // 下拉加载循环
        if (page > 1 && res.data.items) {
          const concatList = this.resourceInfo.concat(res.data.items);
          res.data.items = concatList;
          this.resourceInfo = res.data.items;
        } else {
          this.resourceInfo = res.data.items;
        }
      }, result => {
        this.$message.error(result.message);
      });
    },
    // 获取下单形式
    getOrderForm(orderPlatformId) {
      orderFormList(orderPlatformId).then(res => {
        this.formList = res.data;
      }, result => {
        // this.$message.error(result.message);
      });
    },
    // 列表的加载状态
    search(query, array) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      } else {
        array = [];
      }
    },
    /**
     * 执行人相关
     */
    filterData(val) {
      if (val) {
        const userName = val;
        this.getUser(1, userName);
      }
    },
    // 获取用户列表
    getUser(page = 1, userName = '') {
      this.userLoading = true;
      getList(page, 15, { userName }).then(({ data }) => {
        this.userLoading = false;
        if (userName) {
          if (page > 1 && this.userList.items) {
            // data.items = this.handeldefaultUserList(data.items);
            const concatList = this.userList.items.concat(data.items);
            data.items = concatList;
            this.userList = data;
          } else {
            // data.items = this.handeldefaultUserList(data.items);
            this.userList = data;
          }
        } else {
          const newArr = [...this.orderForm.orderOperator, ...data.items];
          if (page > 1 && this.userList.items) {
            const concatList = this.userList.items.concat(data.items);
            this.userList.items = this.arrRepeat(concatList);
            // this.userList.items = concatList;
            this.userList.page = data.page;
          } else {
            this.userList.items = this.arrRepeat(newArr);
            // this.userList.items = newArr;
            this.userList.page = data.page;
          }
        }
      });
    },
    // 滚动加载更多用户
    userLoadMore() {
      const userList = this.userList;
      const currentPage = userList.page;
      if (userList.items) {
        // const isMax = userList.items.length >= userList.total;
        if (userList.items.length < 300 && !this.userLoading) {
          this.getUser(currentPage + 1, '');
        }
      }
    },
    clearUser() { this.getUser(); },
    // 数组去重
    arrRepeat(data) {
      const hash = {};
      const data2 = data.reduce((preVal, curVal) => {
        if (!hash[curVal.id]) {
          hash[curVal.id] = true;
          preVal.push(curVal);
        }
        return preVal;
      }, []);
      return data2;
    },
    // 执行人相关 end

    // 查询账号名称
    // 远程搜索资源名称
    searchResourceName(query) {
      this.resourceList(query, this.orderForm.orderPlatformId);
      this.search(query, this.resourceInfo);
    },
    resourceSelect(item) {
      this.orderForm.resourceId = item.id;
      this.orderForm.attributionMatrix = item.attributionMatrix || '--';
      this.orderForm.accountBelong = item.account || '--';
      this.orderForm.resourceCategory = item.resourceCategory;
      this.orderForm.resourceCode = item.resourceCode || '';
      this.getOrderForm(this.orderForm.orderPlatformId);
      // 执行人回填
      let orderOperatorConfirm = false;
      if (item.orderOperator && item.orderOperator.length > 0 && this.orderForm.orderOperator.length === 0) {
        this.orderForm.orderOperator = item.orderOperator;
      } else if (item.orderOperator && item.orderOperator.length > 0) {
        orderOperatorConfirm = true;
      }
      // 协作部门回填 ，协作部门暂时隐藏
      let cooperationDepartmentConfirm = false;
      if (item.cooperationDepartment && item.cooperationDepartment.length > 0 && this.orderForm.cooperationDepartment.length === 0) {
        this.orderForm.cooperationDepartment = item.cooperationDepartment;
      } else if (item.cooperationDepartment && item.cooperationDepartment.length > 0) {
        cooperationDepartmentConfirm = true;
      }

      // 弹出框 协作部门暂时隐藏
      if (orderOperatorConfirm && !cooperationDepartmentConfirm) {
        const data = {
          orderOperator: item.orderOperator
        };
        if (this.$refs.confirmRef) this.$refs.confirmRef.initConfirm(data, '是否确定覆盖执行人');
      } else if (!orderOperatorConfirm && cooperationDepartmentConfirm) {
      // 协作部门暂时隐藏
        const data = {
          cooperationDepartment: item.cooperationDepartment
        };
        if (this.$refs.confirmRef) this.$refs.confirmRef.initConfirm(data, '是否确定覆盖协作部门');
      } else if (orderOperatorConfirm && cooperationDepartmentConfirm) {
        const data = {
          cooperationDepartment: item.cooperationDepartment,
          orderOperator: item.orderOperator
        };
        if (this.$refs.confirmRef) this.$refs.confirmRef.initConfirm(data, '是否确定覆盖执行人和协作部门');
      }
    },
    setConfirmData(data) {
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          this.orderForm[key] = data[key];
        }
      }
    },
    getOrderFormList(val) {
      // console.log('下单平台', val, this.orderForm.orderPlatformId);
      this.orderForm.resourceName = '';
      this.orderForm.orderFormId = null;
      this.getOrderForm(val);
      this.resourceList('', val);
    },
    orderFormVal(val) { // 获取下单形式的label值，并将值传给成本信息组件用于判断是否展示微任务ID及成本的填写
      let obj = {};
      obj = this.formList.find(item => {
        if (item.id === val) return true;
      });
      Bus.$emit('orderFormVal', obj.value);
      this.$emit('orderFormVal', obj.value);
    },
    // 折扣价格计算
    mathDiscount() {
      const articlesPrice = this.orderForm.articlesPrice;
      const taxAmount = this.orderForm.taxAmount;
      if (articlesPrice && taxAmount) {
        let discountPrice = 0;
        if (Number(taxAmount) > 0 && Number(articlesPrice) > 0) {
          discountPrice = (Number(taxAmount) / Number(articlesPrice)).toFixed(2);
        }
        this.$set(this.orderForm, 'discountPrice', discountPrice);
      }
    },
    upProgress() {
      this.createLoading = true;
    },
    complateSetData({ data, fileName }) {
      this.createLoading = false;
      const fileList = {
        name: fileName,
        url: data.url,
        time: new Date().getTime()
      };
      if (typeof data === 'string') {
        fileList.url = data;
      } else {
        fileList.url = data.url;
      }
      this.orderForm.attachment.push(fileList);
    },
    removeFileList({ file, index }) {
      this.orderForm.attachment.splice(index, 1);
    },
    getFormPromise(index) {
      return new Promise((resolve, reject) => {
        this.$refs.orderForm.validate(valid => {
          if (valid) {
            resolve(valid);
          } else {
            reject(index);
          }
        });
      });
    },
    /**
     * 协作部门相关
     */
    // 获取一级部门列表
    getDeptList() {
      deptList().then(res => {
        this.deptListData = res.data;
      }, result => {
      });
    },
    toUpdateInfo() {
      const orderId = this.$route.params.orderId || '';
      if (orderId) {
        this.$refs.updateInfoDialog.dialogVisibleShow(orderId);
      }
    },
    numberInputChange(key) {
      if (this.orderForm[key]) this.orderForm[key] = Number(this.orderForm[key]).toFixed(2);
    },
    freshData(data) {
      for (const key in data) {
        if (data.hasOwnProperty(key)) {
          this.orderForm[key] = data[key];
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.attachment-container {
  &:hover {
    .delete-publishFile {
      visibility: visible;
    }
  }
}

.delete-publishFile {
  color: #999;
  font-size: 15px;
  margin-left: 10px;
  height: 28px;
  cursor: pointer;
  visibility: hidden;
  display: flex;
  align-items: center;
}
  .order-info {
    width:66%;
    min-height:600px;
    background:rgba(255,255,255,1);
    box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
    border-radius:12px;
    padding: 32px 0 0 32px;
    margin-left: 25px;
    .order-info-form {
      margin-top: 32px;
      .edit-order {
        width: 80%;
        display: flex;
        flex-wrap: wrap;
        & ::v-deep {
          .el-form-item {
            &:nth-of-type(2n) {
              margin-left: 17%;
            }
            .el-textarea__inner {
              height: 64px !important;
            }
          }
        }
      }
    }
    &::v-deep {
    .el-tag--info {
      color: #406EFF;
      background-color: #ecf1ff;
    }
  }
  }
  @media screen and (max-width: 1930px) and (min-width: 1600px) {
    .order-info {
      width: 69.5%;
      .order-info-form {
        .edit-order {
          width: 95%;
          & ::v-deep {
            .el-form-item {
              &:nth-of-type(2n) {
                margin-left: 12%;
              }
              .el-textarea__inner {
                height: 64px !important;
              }
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 1538px) and (max-width: 1599px) {
    .order-info {
      .edit-order {
        width: 76% !important;
      }
    }
  }
  @media screen and (max-width: 1599px) {
    .order-info {
      width: 100%;
      .edit-order {
        width: 95%;
        & ::v-deep {
          .el-form-item {
            &:nth-of-type(2n) {
              margin-left: 8% !important;
            }
            .el-textarea__inner {
              height: 64px !important;
            }
          }
        }
      }
    }
  }
  @media screen and (min-width: 2699px) {
    .order-info {
      width: 100%;
      .edit-order {
        width: 50% !important;
      }
    }
  }
.loading-container {
  width: 100%;
  text-align: center;
  i {
    color: #999;
  }
}
.updateInfo-btn {
  cursor: pointer;
  position: absolute;
  right: -60px;
  top: 1px;
  color: #406EFF;
}
</style>
